<template>
  <div class="app-container">
    <el-table v-loading="listLoading" :data="list" height="400" style="width: 100%;margin-top:10px; overflow:auto" border>
      <el-table-column label="序号" type="index" header-align="center" align="center" width="80" />
      <el-table-column align="center" label="操作" width="120">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleView(scope)">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" label="项目名称">
        <template slot-scope="scope">
          {{ scope.row.xmName }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="api名称">
        <template slot-scope="scope">
          <span>{{ scope.row.tableName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="版本号">
        <template slot-scope="scope">
          <span>{{ scope.row.version }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="创建人">
        <template slot-scope="scope">
          <span>{{ scope.row.createuserName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="创建时间" width="150">
        <template slot-scope="scope">
          {{ scope.row.createtimeTi }}
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :visible.sync="xmViewVisible" append-to-body width="1000px" title="查看API">
      <xm-view v-if="xmViewVisible" ref="xmView" :proid="code" :visible.sync="xmViewVisible" />
    </el-dialog>
  </div>
</template>

<script>

import { getHistryList } from '@/api/usersManualFile'

import XmView from '../manual/view' // eslint-disable-line no-unused-vars

export default {
  components: { XmView },
  props: { // 第二种方式
    history: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      listLoading: false,
      xmViewVisible: false,
      queryPage: {
        page: 1,
        limit: 20,
        loginName: '',
        userName: null,
        state: null,
        beginDate: null,
        endDate: null
      },
      code: '',
      list: []
    }
  },
  created() {
    this.loadList()
  },
  methods: {
    search() { // 查询
      this.loadList()
    },
    loadList() { // 加载列表
      this.list = []
      this.listLoading = true
      getHistryList({ code: this.history }).then(response => {
        this.list = response.data
        this.total = parseInt(response.data.total)
        this.listLoading = false
      }).catch(response => {
        this.listLoading = false
      })
    },
    handleView(scope) {
      this.xmViewVisible = true
      this.code = scope.row.id
      this.$nextTick(() => {
        this.$refs.xmView
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
